<template>
  <el-main>
            <el-row :gutter="20">
              <el-col :span="8">
                <!--卡片区域-->
              <h2>管理员卡片</h2>

                <el-card :body-style="{ padding: '0px',height:'425px' ,margin:'0px'}">
                  <img class="userCard" src="../assets/user.png" alt="">
                  <span class="admin">admin</span>
                  <div style="padding: 14px;">
                    <span class="city">登录地点:河南</span>
                    <div class="bottom clearfix">
                      <time class="time">你上次访问的时间为:{{this.findTime()}}</time>
                      <el-button type="success" round disabled>管理员访问信息</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                      prop="id"
                      label="编号"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="名称"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="价格">
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
<!--    <router-view></router-view>-->
  </el-main>
</template>

<script>
    import axios from "axios";

    export default {
        name: "welcome",
        data(){
         //右侧列表
         return{
           tableData: []
         }
       },
      methods: {
        //获取右侧列表内容
        async getMainList(){
          let res=await  axios.get("http://localhost:3000/rightMain")
          this.tableData=res.data
        },
        //导航栏切换
        trigger() {
          this.isCollapse = !this.isCollapse
        },
        //退出
        back() {
          localStorage.removeItem("token")
          this.$router.push('/login')
        },
        //登录时间
        findTime(){
          var date = new Date()
          let year = date.getFullYear();
          let month = date.getMonth() + 1
          let date1 = date.getDate();
          return year + '年' + month + '月' + date1 + '日'
        },
      },
      created() {
        this.getMainList()
      },
    }
</script>

<style scoped>
  .el-header {
    display: flex;
    color: white;
    justify-content: space-between;
    background-color: #6E6E6E;
    align-items: center;
  }
  .el-card{
    margin-top: 38px;
  }
  img {
    height: 50px;
    width: 50px;
    cursor: pointer;
    border-radius: 50%;
  }

  .el-aside {
    background-color: #545c64;
  }

  .el-main {
    background-color: #eaedf1;
  }

  .main-contain {
    height: 100%;
  }

  .page {
    margin-left: 10px;
  }

  .el-menu {
    border: none;
  }

  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .userCard {
    padding-top: 10px;
    width: 200px;
    height: 200px;
  }

  .admin {
    position: absolute;
    top: 75px;
    left: 227px;
    font-size: 30px;
    font-weight: bold;
    color: gray;
  }

  .city {
    display: block;
    padding-top: 40px;
    font-size: 22px;
    font-weight: bold;
  }

  .time {
    display: block;
    font-size: 21px;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 15px;

  }
  h2{
    position: absolute;
    top: -9px;
    left: -3px;
  }
  .el-table{
    margin-top: 58px;
  }
  .el-button{
    width: 100%;
  }
</style>
